<template>
	<view class="app">
		<customTabbar></customTabbar>
		<!-- 顶部搜索框 -->
		<view class="myinput" @tap="sousuoFn"><u-search  disabled shape="round" height="68rpx" :showAction="false"></u-search></view>
		<view class="kd_content">
			<!-- 左边侧边栏 -->
			<view class="kd_left_cebianlan">
				<view
					:class="{ kd_left_cebianlan_item_a: categoryList_isShow == item.id }"
					class="kd_left_cebianlan_item"
					v-for="item in categoryList"
					:key="item.id"
					@tap="commodityFn(item.id)"
				>
					<text class="kd_left_cebianlan_item_title">{{ item.name }}</text>
				</view>
			</view>
			<!-- 右边内容 -->
			<view class="kd_right_content">
				<!-- 大图 -->
				<view class="kd_right_image">
					<image :src="currentCategory.banner_url" mode="scaleToFill"></image>
					<text class="kd_right_title">{{currentCategory.front_name}}</text>
					</view>
				<!-- 大标题 -->
				<view class="kd_right_big_title">{{ currentCategory.name }}</view>
				<view class="kd_right_box">
					<view class="kd_right_box_item" v-for="item in currentCategory.subCategoryList">
						<image :src="item.wap_banner_url" mode="widthFix" class="kd_right_box_image"></image>
						<view class="kd_right_box_title">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import customTabbar from '@/custom-tab-bar/index.vue';
import { ApiallCategorized,ApiCurrent } from '@/utils/api.js';
export default {
	components: {
		customTabbar
	},
	data() {
		return {
			// 全部分类
			categoryList: [],
			// 当前分类
			currentCategory: [],
			categoryList_isShow: '1005000'
		};
	},
	async onShow() {
		this.$store.commit('tabbarIndex', 2);
		let res = await ApiallCategorized();

		let { categoryList, currentCategory } = res.data;
		this.categoryList = categoryList;
		this.currentCategory = currentCategory;
		console.log(res.data.currentCategory);
	},
	methods: {
		// 点击商品
		async commodityFn(id){
			// 高亮
			this.categoryList_isShow = id;
			let res = await ApiCurrent({
				id:id
			})
			let {currentCategory} =res.data
			this.currentCategory = currentCategory
			console.log(res)
		},
		sousuoFn(){
			uni.navigateTo({
				url:"/pages/popup/popup"
			})
		}
	},
	onLoad() {}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.app {
	// padding-bottom: 100rpx;
	// 顶部搜索框
	.myinput {
		background-color: #fff;
		padding: 20rpx 24rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.kd_content {
		display: flex;
		// 左边侧边栏
		.kd_left_cebianlan {
			// background-color: #fcf;
			.kd_left_cebianlan_item {
				width: 150rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				.kd_left_cebianlan_item_title{
					width: 100%;
					padding-left: 20rpx;
					position: relative;
				}
			}
			.kd_left_cebianlan_item_a {
				background-color: #fff;
				.kd_left_cebianlan_item_title{
					&:after{
						content: "";
						width: 10rpx;
						height: 38rpx;
						background-color: red;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			
		}
		// 右边内容
		.kd_right_content {
			width: 600rpx;
			height: 100vh;
			background-color: #fff;
			// background-color: #cfc;
			// 图片
			.kd_right_image {
				height: 280rpx;
				width: 570rpx;
				background-color: #000;
				margin: 5rpx 14rpx;
				box-shadow: 0 0 12rpx #000;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				image {
					height: 280rpx;
					width: 570rpx;
					opacity: 0.5;
				}
				.kd_right_title{
					position: absolute;
					top: 50%;
					left: 50%;
					font-size: 28rpx;
					color: #fff;
					transform: translateX(-50%);
				}
			}
			// 标题
			.kd_right_big_title {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				background-color: #fff;
				&::after {
					content: '';
					width: 60rpx;
					height: 4rpx;
					background-color: #ccc;
					position: absolute;
					top: 50rpx;
					left: 160rpx;
				}
				&::before {
					content: '';
					width: 60rpx;
					height: 4rpx;
					background-color: #ccc;
					position: absolute;
					top: 50rpx;
					right: 160rpx;
				}
			}
			.kd_right_box {
				display: flex;
				flex-wrap: wrap;
				border-top: 0.5rpx solid #ccc;
				.kd_right_box_item {
					width: 200rpx;
					height: 170rpx;
					background-color: #fff;
					border: 0.5rpx solid #ccc;
					box-sizing: border-box;
					border-left: 0;
					border-top: 0;
					padding: 32rpx 16rpx;
					text-align: center;
					.kd_right_box_image {
						width: 56rpx;
					}
					.kd_right_box_title {
						font-size: 23rpx;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
}
</style>
